<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.7, minimum-scale=0.2, maximum-scale=1.0, user-scalable=yes" />
    <title>登录页面</title>
    <!-- 加载Bootstrap样式 -->
    <link href="boot.css" rel="stylesheet">
    <script src="common.js"></script>
    <style>
        /* 自定义样式 */
        .login-container {
            max-width: 400px;
            margin: auto;
            margin-top: 100px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #fff;
        }
    </style>
</head>
<body>

<div class="login-container">
    <h2 class="mb-4">账号登录</h2>
    <form id="loginForm" action="">
        <div class="form-group">
            <input type="text" class="form-control" name="username" placeholder="账号">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" name="password" placeholder="密码">
        </div>
        <button type="submit" class="btn btn-primary btn-block">登录</button>
    </form>
</div>

<script>
    // 获取表单元素
    const loginForm = document.getElementById('loginForm');

    // 表单提交事件处理函数
    loginForm.addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取用户名和密码
        const loginName = this.username.value;
        const password = this.password.value;
        // 检查用户名是否为空
        if (!loginName) {
            showAlert('用户名不能为空', 'alert-danger');
            return
        }
        // 检查密码是否为空
        if (!password) {
            showAlert('密码不能为空', 'alert-danger');
            return
        }

        // 构造请求体
        const formData = new FormData();
        formData.append('loginName', loginName);
        formData.append('password', password);

        // 发送POST请求
        fetch('http://' + ip + ':8080/login', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.result === "ok") {
                    var loginName = data.user.loginName;
                    var username = data.user.username;
                    // console.log('Login successful:', data);
                    // 在这里处理登录成功的逻辑
                    showAlert('Login successful', 'alert-success');
                    sessionStorage.setItem("username", username)
                    // 登录成功后跳转到指定页面
                    if (loginName.startsWith("admin")) {
                        window.location.href = '/bp/manager.html'; // 替换为你想要跳转的页面的URL
                    } else {
                        window.location.href = '/bp/navigation.html'; // 替换为你想要跳转的页面的URL
                    }
                } else {
                    showAlert('Login failed', 'alert-danger');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // 在这里处理登录失败的逻辑
                showAlert('Login failed', 'alert-danger');
            });
    });

    function showAlert(message, className) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert ${className} mt-4`;
        alertDiv.textContent = message;
        // 居中显示
        alertDiv.style.position = 'fixed';
        alertDiv.style.top = '50%';
        alertDiv.style.left = '50%';
        alertDiv.style.transform = 'translate(-50%, -50%)';

        document.body.appendChild(alertDiv);


        // 3秒后自动关闭弹窗
        setTimeout(() => {
            alertDiv.remove();
        }, 3000);
    }
</script>

</body>
</html>
